<script setup lang="ts" name="CkDesigner">
import EditRuler from './components/EditRuler/index.vue'
import EditRange from './components/EditRange/index.vue'
import { useDesignerStore } from '@/store/bigScreen/designerStore'
import { storeToRefs } from 'pinia'
import useStyle from './hooks/useStyle'
import useInitData from './hooks/useInitData'
import { useAddKeyboard } from './hooks/useAddKeyboard'
import { useLayoutStore } from '@/store/bigScreen/layoutStore'

const layoutStore = useLayoutStore()

const { isLayoutDragging } = storeToRefs(layoutStore)

const router = useRouter()

const designStore = useDesignerStore()
const { editCanvas } = storeToRefs(designStore)

const { rangeStyle } = useStyle()
const { initData } = useInitData(router)

onMounted(() => {
  editCanvas.value.editLayoutDom = document.getElementById('ck-designer')
  editCanvas.value.editContentDom = document.getElementById('ck-content')
  useAddKeyboard()
  nextTick(() => {
    initData()
  })
})

onUnmounted(() => {
  editCanvas.value.editLayoutDom = null
  editCanvas.value.editContentDom = null
})
</script>

<template>
  <div id="ck-designer" :class="['designer-workstation', isLayoutDragging ? 'is-layout-dragging' : '']">
    <EditRuler>
      <div id="ck-content" class="designer-content">
        <EditRange>
          <div class="designer-body" :style="{ ...rangeStyle }"></div>
        </EditRange>
      </div>
    </EditRuler>
  </div>
</template>

<style scoped lang="scss">
.designer-workstation {
  position: relative;
  flex: 1;
  overflow: hidden;
  background-color: var(--el-fill-color-blank);
  background-image: linear-gradient(var(--el-fill-color-blank) 12px, transparent 0), linear-gradient(90deg, transparent 12px, var(--el-text-color-placeholder) 0);
  background-size: 13px 13px, 13px 13px;

  &.is-layout-dragging{
    pointer-events: none;
  }

  .designer-content {
    overflow: hidden;
  }
}
</style>
